
import { useReducer } from 'react';
import { connect } from 'react-redux';
import './Login.less'
import { useNavigate, Routes, Route } from 'react-router-dom';

const defaultState = {
  user: {
    name: '',
    id: '',
    phone: '',
  },
  loginForm: {
    name: 'admin',
    password: 'admin',
  }
}

const reducer = (state:any, action:any) => {
  switch(action.type) {
    case 'set-form': {
      return {
        ...state,
        loginForm: {
          ...state.loginForm,
          ...action.data,
        }
      };
    }
    default: {
      return state;
    }
  }
}

function Login (props:any) {
  let [state, dispatch] = useReducer(reducer, defaultState);
  const navigate = useNavigate();
  const toLogin = () => {
    navigate('/work')
  }
  return (
    <div className="p_login black_sky">
      <div className="moon"></div>
      {/* <div className="red_heart"></div> */}

      <div className="login_box">
        <div className="login_title">登录</div>
        <div className="login_memo">GOOD GOOD STUDY, DAY DAY CODING!</div>
        <div className="login_form_item">
          <label className="login_form_item_title">账号：</label>
          <input className="login_form_item_input" type="text" placeholder="请输入账号" value={state.loginForm.name} onChange={e => dispatch({type: 'set-form', data: {name: e.target.value}})}/>
        </div>
        <div className="login_form_item">
          <label className="login_form_item_title">密码：</label>
          <input className="login_form_item_input" type="password" placeholder="请输入密码" value={state.loginForm.password} onChange={e => dispatch({type: 'set-form', data: {password: e.target.value}})}/>
        </div>
        <div className="login_btn" onClick={toLogin}>登录</div>
      </div>
    </div>
  )
}

const mapStateToProps = (state:any) => {
  console.log('state: ', state);
  let appWin = state.appWin;
  return {
    position: appWin?.position || [],
  }
}
export default connect(mapStateToProps)(Login);